<template>
  <div class="box">
    <el-calendar ref="calendar" style=" transform: scale(0.80);transform-origin: top left;">
      <template #header="{ date }">
        <span></span>
        <span style="color: #000;font-size: 20px;font-weight: bold;">{{ formatHeaderDate(date) }}</span>
        <el-button-group>
          <el-button size="large" @click="selectDate('prev-month')">
            < </el-button>
              <el-button size="large" @click="selectDate('today')">今天</el-button>
              <el-button size="large" @click="selectDate('next-month')">
                >
              </el-button>
        </el-button-group>
      </template>
    </el-calendar>
    </div>

</template>

<script lang='ts' setup>
import { ref } from 'vue'
import 'dayjs/locale/zh-cn'
import { type CalendarDateType, type CalendarInstance } from 'element-plus'

function formatHeaderDate(dateStr: string) {
  // 兼容 el-calendar 传入的 date 字符串格式
  const d = new Date(dateStr)
  if (isNaN(d.getTime())) return dateStr
  return `${d.getFullYear()}年   ${d.getMonth() + 1}月`
}


const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}
</script>

<style lang='scss' scoped>


.el-calendar {
  width: 87.5%;
  margin-top: 10px;
  background-color: #f0f7ff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-left: 260px;
    // 调整日历主体内容
  .el-calendar__body {
    padding: 5px 0;
  }
    // 调整单元格内边距和高度
  .el-calendar-table td {
    padding: 5px 0; // 减小内边距
    height: auto;   // 让高度自适应内容
  }
    // 调整日期数字大小和内边距
  .el-calendar-day {
    width: 30px;
    height: 30px;
    line-height: 30px; // 调整行高与宽高一致
    font-size: 13px;
    padding: 0;
  }
}


.box {
  // background-color: black;
  height: 600px;
  width: 1500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>